<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.container {
				width: 850px;
				margin: 100px auto 0;
				padding: 20px;
				background: #eee;
			}
			.clearfix:after{
				content: '';
				display: block;
				clear: both;
			}

			.cell {
				text-align: center;
				height: 40px;
				width: 90px;
				color: white;
				background: blue;
				border: 1px solid #FFFFFF;
				line-height: 40px;
				font-size: 20px;
				font-weight: 700;
				cursor: pointer;
				float: left;
			}
			.cell:hover{
				transform: scale(1.2);
				transition: all 0.5s;
			}
		</style>
	</head>
	<body>
		<div class="container">
			
		</div>
		<script type="text/javascript">
			onload = function(){
				var container = document.getElementsByClassName('container')[0];
				console.log(container);
				for(var i=1;i<=9;i++){
					var row = document.createElement('div');
					row.className = 'row clearfix';
					for(var j=1;j<=i;j++){
						var cell = document.createElement('div');
						cell.className = 'cell';
						cell.innerHTML = `<span data-value=${i*j}>${i}×${j}=${i*j}</span>`;
						row.append(cell)
					};
					container.append(row);
					
					
				}
			}
		</script>
	</body>
</html>
